<template>
	<div>
		<div class="publicpageview" id="publicpageview" style="position: relative;">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">
				直管公有住宅房屋掌管统计月报
				<el-button style="position: absolute;right: 50px;" type="primary" size="mini" @click="fanhui">返回</el-button>
			</div>
			<div style="display: flex;margin-top: 20px;box-sizing: border-box;">
				<div class="list4">项目</div>
				<div class="list2">
					<div class="list6">总计</div>
					<div style="display: flex;">
						<div class="list3">所数</div>
						<div class="list3">不计租间 </div>
						<div class="list3">计租间 </div>
						<div class="list3">建筑面积 </div>
						<div class="list3">使用面积 </div>
						<div class="list3">计租面积 </div>
						<div class="list3">租金定额 </div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">分类情况</div>
					<div style="display: flex;">
						<div class="list3">类别</div>
						<div class="list3">所数</div>
						<div class="list3">不计租间</div>
						<div class="list3">计租间</div>
						<div class="list3">建筑面积</div>
						<div class="list3">使用面积</div>
						<div class="list5">
							<div>计租面积</div>
							<div style="display: flex;">
								<div class="list7">合计</div>
								<div class="list7">居室</div>
								<div class="list7">附属</div>
								<div class="list7">附加</div>
							</div>
						</div>
						<div class="list5">
							<div>租金定额</div>
							<div style="display: flex;">
								<div class="list7">合计</div>
								<div class="list7">居室</div>
								<div class="list7">附属</div>
								<div class="list7">附加</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 上期累计 -->
			<div style="display: flex;box-sizing: border-box;">
				<div class="list8">上期累计</div>
				<div class="list3">{{objList[0].allBlockNum}}</div>
				<div class="list3">{{objList[0].allNotRentFlagNum}}</div>
				<div class="list3">{{objList[0].allRentFlagNum}}</div>
				<div class="list3">{{objList[0].allBuildingArea}}</div>
				<div class="list3">{{objList[0].allUsingArea}}</div>
				<div class="list3">{{objList[0].allRentArea}}</div>
				<div class="list3">{{objList[0].allRentPrice}}</div>
				<div class="list3">
					<div class="list7">楼</div>
					<div class="list7">平</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].blockNum}}</div>
					<div class="list7">{{objList[0].typeList[1].blockNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].rentNotFlagNum}}</div>
					<div class="list7">{{objList[0].typeList[1].rentNotFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].rentFlagNum}}</div>
					<div class="list7">{{objList[0].typeList[1].rentFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].buildingArea}}</div>
					<div class="list7">{{objList[0].typeList[1].buildingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].usingArea}}</div>
					<div class="list7">{{objList[0].typeList[1].usingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].rentArea}}</div>
					<div class="list7">{{objList[0].typeList[1].rentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].roomRentArea}}</div>
					<div class="list7">{{objList[0].typeList[1].roomRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].affiliatedRentArea}}</div>
					<div class="list7">{{objList[0].typeList[1].affiliatedRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].additionalRentArea}}</div>
					<div class="list7">{{objList[0].typeList[1].additionalRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].rentPrice}}</div>
					<div class="list7">{{objList[0].typeList[1].rentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].roomRentPrice}}</div>
					<div class="list7">{{objList[0].typeList[1].roomRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].affiliatedRentPrice}}</div>
					<div class="list7">{{objList[0].typeList[1].affiliatedRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[0].typeList[0].additionalRentPrice}}</div>
					<div class="list7">{{objList[0].typeList[1].additionalRentPrice}}</div>
				</div>
			</div>
			<!-- 本期增加 -->
			<div style="display: flex;box-sizing: border-box;">
				<div class="list8">本期增加</div>
				<div class="list3">{{objList[1].allBlockNum}}</div>
				<div class="list3">{{objList[1].allNotRentFlagNum}}</div>
				<div class="list3">{{objList[1].allRentFlagNum}}</div>
				<div class="list3">{{objList[1].allBuildingArea}}</div>
				<div class="list3">{{objList[1].allUsingArea}}</div>
				<div class="list3">{{objList[1].allRentArea}}</div>
				<div class="list3">{{objList[1].allRentPrice}}</div>

				<div class="list3">
					<div class="list7">楼</div>
					<div class="list7">平</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].blockNum}}</div>
					<div class="list7">{{objList[1].typeList[1].blockNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].rentNotFlagNum}}</div>
					<div class="list7">{{objList[1].typeList[1].rentNotFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].rentFlagNum}}</div>
					<div class="list7">{{objList[1].typeList[1].rentFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].buildingArea}}</div>
					<div class="list7">{{objList[1].typeList[1].buildingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].usingArea}}</div>
					<div class="list7">{{objList[1].typeList[1].usingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].rentArea}}</div>
					<div class="list7">{{objList[1].typeList[1].rentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].roomRentArea}}</div>
					<div class="list7">{{objList[1].typeList[1].roomRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].affiliatedRentArea}}</div>
					<div class="list7">{{objList[1].typeList[1].affiliatedRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].additionalRentArea}}</div>
					<div class="list7">{{objList[0].typeList[1].additionalRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].rentPrice}}</div>
					<div class="list7">{{objList[1].typeList[1].rentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].roomRentPrice}}</div>
					<div class="list7">{{objList[1].typeList[1].roomRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].affiliatedRentPrice}}</div>
					<div class="list7">{{objList[1].typeList[1].affiliatedRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[1].typeList[0].additionalRentPrice}}</div>
					<div class="list7">{{objList[1].typeList[1].additionalRentPrice}}</div>
				</div>
			</div>
			<!-- 本期减少 -->
			<div style="display: flex;box-sizing: border-box;">
				<div class="list8">本期减少</div>
				<div class="list3">{{objList[2].allBlockNum}}</div>
				<div class="list3">{{objList[2].allNotRentFlagNum}}</div>
				<div class="list3">{{objList[2].allRentFlagNum}}</div>
				<div class="list3">{{objList[2].allBuildingArea}}</div>
				<div class="list3">{{objList[2].allUsingArea}}</div>
				<div class="list3">{{objList[2].allRentArea}}</div>
				<div class="list3">{{objList[2].allRentPrice}}</div>

				<div class="list3">
					<div class="list7">楼</div>
					<div class="list7">平</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].blockNum}}</div>
					<div class="list7">{{objList[2].typeList[1].blockNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].rentNotFlagNum}}</div>
					<div class="list7">{{objList[2].typeList[1].rentNotFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].rentFlagNum}}</div>
					<div class="list7">{{objList[2].typeList[1].rentFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].buildingArea}}</div>
					<div class="list7">{{objList[2].typeList[1].buildingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].usingArea}}</div>
					<div class="list7">{{objList[2].typeList[1].usingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].rentArea}}</div>
					<div class="list7">{{objList[2].typeList[1].rentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].roomRentArea}}</div>
					<div class="list7">{{objList[2].typeList[1].roomRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].affiliatedRentArea}}</div>
					<div class="list7">{{objList[2].typeList[1].affiliatedRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].additionalRentArea}}</div>
					<div class="list7">{{objList[2].typeList[1].additionalRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].rentPrice}}</div>
					<div class="list7">{{objList[2].typeList[1].rentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].roomRentPrice}}</div>
					<div class="list7">{{objList[2].typeList[1].roomRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].affiliatedRentPrice}}</div>
					<div class="list7">{{objList[2].typeList[1].affiliatedRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[2].typeList[0].additionalRentPrice}}</div>
					<div class="list7">{{objList[2].typeList[1].additionalRentPrice}}</div>
				</div>
			</div>
			<!-- 本期累计 -->
			<div style="display: flex;box-sizing: border-box;">
				<div class="list8">本期累计</div>
				<div class="list3">{{objList[3].allBlockNum}}</div>
				<div class="list3">{{objList[3].allNotRentFlagNum}}</div>
				<div class="list3">{{objList[3].allRentFlagNum}}</div>
				<div class="list3">{{objList[3].allBuildingArea}}</div>
				<div class="list3">{{objList[3].allUsingArea}}</div>
				<div class="list3">{{objList[3].allRentArea}}</div>
				<div class="list3">{{objList[3].allRentPrice}}</div>

				<div class="list3">
					<div class="list7">楼</div>
					<div class="list7">平</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].blockNum}}</div>
					<div class="list7">{{objList[3].typeList[1].blockNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].rentNotFlagNum}}</div>
					<div class="list7">{{objList[3].typeList[1].rentNotFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].rentFlagNum}}</div>
					<div class="list7">{{objList[3].typeList[1].rentFlagNum}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].buildingArea}}</div>
					<div class="list7">{{objList[3].typeList[1].buildingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].usingArea}}</div>
					<div class="list7">{{objList[3].typeList[1].usingArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].rentArea}}</div>
					<div class="list7">{{objList[3].typeList[1].rentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].roomRentArea}}</div>
					<div class="list7">{{objList[3].typeList[1].roomRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].affiliatedRentArea}}</div>
					<div class="list7">{{objList[3].typeList[1].affiliatedRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].additionalRentArea}}</div>
					<div class="list7">{{objList[3].typeList[1].additionalRentArea}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].rentPrice}}</div>
					<div class="list7">{{objList[3].typeList[1].rentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].roomRentPrice}}</div>
					<div class="list7">{{objList[3].typeList[1].roomRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].affiliatedRentPrice}}</div>
					<div class="list7">{{objList[3].typeList[1].affiliatedRentPrice}}</div>
				</div>
				<div class="list3">
					<div class="list7">{{objList[3].typeList[0].additionalRentPrice}}</div>
					<div class="list7">{{objList[3].typeList[1].additionalRentPrice}}</div>
				</div>
			</div>
			<!-- 财产增减分析 -->
			<div style="display: flex;box-sizing: border-box;">
				<div class="list9">财产增减分析</div>
				<div class="list10">
					<div class="list11">上期累计</div>
					<div class="list11">本期增加</div>
					<div class="list12">上期累计</div>
					<div class="list11">本期减少</div>
				</div>
				<div class="list14">
					<div class="list15">市区统建</div>
					<div class="list16">拆除不建</div>
				</div>
				<div class="list17">
					<div class="list18">0</div>
					<div class="list18">0</div>
					<div class="list19">0</div>
					<div class="list18">0</div>
				</div>
				<div class="list14">
					<div class="list15">单位移交</div>
					<div class="list16">出售</div>
				</div>
				<div class="list17">
					<div class="list18">0</div>
					<div class="list18">0</div>
					<div class="list19">0</div>
					<div class="list18">0</div>
				</div>
				<div class="list20">
					<div class="list21">扩改建</div>
					<div class="list22">扩改建</div>
				</div>
				<div class="list17">
					<div class="list18">0</div>
					<div class="list18">0</div>
					<div class="list19">0</div>
					<div class="list18">0</div>
				</div>
				<div class="list14">
					<div class="list15">私人献产</div>
					<div class="list16">发还</div>
				</div>
				<div class="list17">
					<div class="list18">0</div>
					<div class="list18">0</div>
					<div class="list19">0</div>
					<div class="list18">0</div>
				</div>
				<div class="list14">
					<div class="list15">公用移入</div>
					<div class="list16">移转公用</div>
				</div>
				<div class="list17">
					<div class="list18">0</div>
					<div class="list18">0</div>
					<div class="list19">0</div>
					<div class="list18">0</div>
				</div>
				<div class="list20">
					<div class="list21">其它</div>
					<div class="list22">其它</div>
				</div>
				<div class="list20">
					<div class="list23">0</div>
					<div class="list23">0</div>
					<div class="list24">0</div>
					<div class="list23">0</div>
				</div>
				<div class="list14">
					<div class="list15">合计</div>
					<div class="list16">合计</div>
				</div>
				<div class="list20">
					<div class="list23">0</div>
					<div class="list23">0</div>
					<div class="list24">0</div>
					<div class="list23">0</div>
				</div>
			</div>
		</div>

		<!-- <button style="margin: 10px auto 0;display: block;" @click="handleout">打印直管公有住宅房屋掌管统计月报</button> -->

	</div>
</template>

<script>
	import * as XLSX from 'xlsx'
	import dayjs from 'dayjs'
	import {
	} from '@/api/industry'
	export default {
		props: {
			blockobj: Array
		},
		name: 'zujintiaozhengguocheng',
		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				topContet: {},
				hejiObject: {
					fieldName3: 0,
					fieldName4: 0,
					fieldName5: 0,
					fieldName6: 0,
					fieldName7: 0,
					fieldName8: 0,
					fieldName9: 0,
					fieldName10: 0,
					fieldName11: 0,
					fieldName12: 0,
					fieldName13: 0
				},
				objList:[]
			}
		},
		computed: {},
		mounted() {
			this.objList = this.blockobj
			// this.topContet = this.blockobj.exportTou
		},

		methods: {
			fanhui(){
				this.$emit('fanhui')
			},
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let list = this.list
						let outList = []
						this.list.forEach((item, index) => {
							outList.push({
								间号: item.roomNo,
								使用面积: item.usingArea,
								计租面积: item.rentArea,
								用途: item.use,
								租金类别: item.rentWay,
								地段等级: item.addressLevel,
								房屋结构: item.structure,
								暖气: item.heatUnitRent,
								超高: item.overHeight,
								超高增加: item.overHeightIncrease,
								超高租金: item.overHeightRent,
								单位租金: item.unitRentPrice,
								净高: item.height,
								埋深: item.depth,
								'%)': item.reducePercent,
								基本租金: item.basicRent,
								暖气: item.heatRent,
								超高: item.overHeightRent,
								租金定额: item.rentPrice,
								变动日期: item.changeDate
							})
						})
						// 获取表格数据
						const data = outList
						// 转换数据为工作表
						const worksheet = XLSX.utils.json_to_sheet(data)
						// 创建新的工作簿
						const workbook = XLSX.utils.book_new()
						// 将工作表添加到工作簿
						XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
						// 导出Excel文件
						XLSX.writeFile(workbook, '非住宅房屋租金计算表.xlsx')
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消导出'
						})
					})
			}
		},
	}
</script>

<style scoped>
	.publicpageview {
		width: 1380px;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20px;
		outline: 1px solid black;
	}

	.list1 {
		width: 100px;
		box-sizing: border-box;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: 1px solid black;
	}

	.list2 {
		height: 60px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.left {
		width: 25px;
		height: 360px;
		outline: 1px solid black;
		line-height: 180px;
		text-align: center;
		box-sizing: border-box;
	}

	.list3 {
		width: 60px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
		font-size: 12px
	}

	.list4 {
		font-size: 12px;
		width: 70px;
		height: 60px;
		line-height: 60px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list8 {
		font-size: 12px;
		width: 70px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list7 {
		font-size: 12px;
		width: 60px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list9 {
		font-size: 12px;
		width: 130px;
		height: 100px;
		line-height: 100px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list10 {
		font-size: 12px;
		width: 120px;
		height: 100px;
		line-height: 100px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list11 {
		font-size: 12px;
		width: 120px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list12 {
		font-size: 12px;
		width: 120px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list13 {
		font-size: 12px;
		width: 120px;
		height: 60px;
		line-height: 60px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list14 {
		font-size: 12px;
		width: 60px;
		height: 100px;
		line-height: 100px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list15 {
		font-size: 12px;
		width: 60px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list16 {
		font-size: 12px;
		width: 60px;
		height: 60px;
		line-height: 60px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list17 {
		font-size: 12px;
		width: 60px;
		height: 100px;
		line-height: 100px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list18{
		font-size: 12px;
		width: 60px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list19{
		font-size: 12px;
		width: 60px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list20{
		font-size: 12px;
		width: 120px;
		height: 100px;
		line-height: 100px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list21{
		font-size: 12px;
		width: 120px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list22{
		font-size: 12px;
		width: 120px;
		height: 60px;
		line-height: 60px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list23{
		font-size: 12px;
		width: 120px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list24{
		font-size: 12px;
		width: 120px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list5 {
		font-size: 12px;
		width: 240px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list6 {
		font-size: 12px;
		width: 100%;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
</style>